<template>
	<view>
		<view class="click_sdq">
			<view class="item">
				<view><image src="../../../static/1.jpeg" mode=""></image></view>
				<view>
					<view>用量：{{sdqs.utilities_sfZXdb-sdqs.utilities_sfSCdb}} PCS</view>
					<view>单价：{{sdqs.utilities_sfdj}}</view>
					<view>金额：{{sfz}} 元</view>
				</view>
			</view>
			<view class="item">
				<view><image src="../../../static/2.jpeg" mode=""></image></view>
				<view>
					<view>用量：{{(sdqs.utilities_dfZXdb-sdqs.utilities_dfSCdb)}} PCS</view>
					<view>单价：{{sdqs.utilities_dfdj}} </view>
					<view>金额：{{dfz}} 元</view>
				</view>
			</view>
			<view class="item">
				<view><image src="../../../static/3.jpeg" mode=""></image></view>
				<view>
					<view>用量：{{(sdqs.utilities_qfZXdb-sdqs.utilities_qfSCdb)}} PCS</view>
					<view>单价：{{sdqs.utilities_qfdj}} </view>
					<view>金额：{{qfz}} 元</view>
				</view>
			</view>
		</view>
		<view class="zhifu">
			<view @click="kk('wx')"><view>微信支付</view><view :class='cli=="wx"?"click":"noshow"'><view class="iconfont">&#xe663;</view></view></view>
			<view @click="kk('zfb')"><view>支付宝</view><view :class='cli=="zfb"?"click":"noshow"'><view class="iconfont">&#xe663;</view></view></view>
			<view><button @click='jf'>立即缴费</button></view>
		</view>
	</view>
</template>

<script>
	import { reactive,toRefs,computed} from 'vue'
	import http from '../../../utils/http.js'
	import store from '../../../store/index.js'
	export default {
		setup(){
			let data = reactive({
				cli:'wx',
				sdqs:{},
				kk:(e)=>{
					data.cli=e
				},
				jf:()=>{
					wx.showModal({
					  title: '提示',
					  content: '是否确认使用 '+(data.cli=='wx'?'微信':'支付宝')+' 进行缴费',
					  success (res) {
					    if (res.confirm) {
					      wx.showLoading({
					        title: '正在缴费',
					      })
					      setTimeout(()=>{
					      	wx.hideLoading().then(()=>{
								http({
									url:'/users/sdqJf',
									method:'post',
									data:{
										name:store.getters.getUser.guanli_hymc
									}
								}).then((e)=>{
									console.log(e.data.code,e.data)
									if(e.data.code==200){
										wx.showToast({
										  title: '缴费成功',
										  icon:'success',
										  duration: 2000
										})
										http({
											url:'/users/sdqSel',
											method:'post',
											data:{
												name:store.getters.getUser.guanli_hymc
											}
										}).then((e)=>{
											data.sdqs=e.data.data[0]
										})
									}
								})
							})
					      },1000)
					    } else if (res.cancel) {
					      	wx.showToast({
					      	  title: '取消缴费',
					      	  icon:'success',
					      	  duration: 1000
					      	})
					    }
					  }
					})
				}
			})
			let sfz = computed(()=>((data.sdqs.utilities_sfZXdb-data.sdqs.utilities_sfSCdb)*parseInt(data.sdqs.utilities_sfdj)))
			let dfz = computed(()=>((data.sdqs.utilities_dfZXdb-data.sdqs.utilities_dfSCdb)*parseInt(data.sdqs.utilities_dfdj)))
			let qfz = computed(()=>((data.sdqs.utilities_qfZXdb-data.sdqs.utilities_qfSCdb)*parseInt(data.sdqs.utilities_qfdj)))
			console.log(sfz._value,sfz)
			return {...toRefs(data),sfz,dfz,qfz}
		},
	onShow(){
		http({
			url:'/users/sdqSel',
			method:'post',
			data:{
				name:store.getters.getUser.guanli_hymc
			}
		}).then((e)=>{
			this.sdqs=e.data.data[0]
		})
	}	
	}
</script>

<style scoped lang="less">
@import "~@/static/font/iconfont.css";
.click_sdq{
	padding: 20rpx 0;
	border-bottom: 1px solid #D9D9D9;
}
.item{
	display: flex;
	justify-content: center;
	padding: 40rpx 20rpx;
	margin: 20rpx 80rpx;
	border: 1px solid #D9D9D9;
	image{
		margin-right: 20rpx;
		width: 160rpx;
		height: 140rpx;
	}
}
.zhifu{
	padding: 0 30rpx;
	>view:not(:last-child){
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #D9D9D9;
		display: flex;
		justify-content: space-between;
	}
	>view:last-child{
		margin-top: 20rpx;
		button{
			background-color: #118EE9;
			color: white;
		}
	}
}
.noshow{
	opacity: 0;
}
</style>
